<template>
  <div class="home">
    <div id="map" style="width: 100%;height: 100%"></div>
  </div>
</template>

<script>
//这个链接可以去获取全国所有的地图json数据
//http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.769817845138945&lng=104.29901249999999&zoom=4
const nmgJson = require('echarts/map/json/province/neimenggu.json');
import 'echarts'
export default {
  name: "demo-map",
  data() {
    return {
      cityMap: null,
    }
  },
  mounted() {
    this.$nextTick(()=>{
      this.cityMap = this.$echarts.init(document.getElementById('map'));
      this.cityMap.off('click');
      this.registerMap();
    })
  },
  methods: {
    //注册地图：1、绘制头层（省级）地图rendHead()；2、绘制市区级地图rendCity();
    registerMap() {
      //绘制省级地图
      this.rendHead();
      //点击事件
      this.cityMap.on('click', $mod => {
        const {name,value} = $mod.data
        switch ($mod.data.zoom) {
          case 1:
            this.rendCity(name,value);
            this.setHashMap($mod.data.zoom + 1,name,value)
            break
          //绘制区县内容
          case 2:
            let oneMap = {
              type: 'FeatureCollection',
              features: [$mod.data.data],
              parent: value,
              zoom: 3
            }
            this.$echarts.regi
            break
          case 3:
            this.rendHead();
            this.clearHashMap();
            break
        }
      })
    },
    //1、绘制省级地图rendHEAD
    rendHead() {
      const mapName = [];
      nmgJson.features.forEach(city => {
        //城市名称信息
        mapName.push({
          name: city.properties.name, //名称
          value: city.id,             //城市编码，对应文件名
          zoom: 1                     //层级
        })
        //注册
        //this.$echarts.registerMap('内蒙古',nmgJson)
        //加载
        // this.renderMap('',mapName)
      })
    },
    //2、绘制市区级地图rendCity
    rendCity(name,value) {
      let fileName = value
      let cityJsonData = require(`echarts/map/js/city/nmg/${fileName}.json`)
      //this.registerMap(name,cityJsonData);
      //区县名称配置
      let countyName = []
      cityJsonData.features.forEach(county=>{
        countyName.push({
          name: county.properties.name,
          value: null,
          data: county,
          parent: value,
          zoom: 2
        })
      })
      //加载地图
      this.rendCity(name,countyName)
    },
    //渲染地图
    renderMap(mapName, cityNameList) {
      option.series = [{
        name: mapName,
        type: 'map',
        mapType: mapName,
        nameMap: mapName,
        label: {
          normal: {
            show: true,
            textStyle: {
              color: '#303753',
              fontSize: 13
            }
          },emphasis: {
            show: true,
            textStyle: {
              color: '#2a8ab3',
              fontSize: 16
            }
          }
        },
        itemStyle: {
          normal: {
            areaColor: 'rgb(78, 163, 151)',
            borderWidth: 2,
            borderColor: 'rgb(34, 195, 170)',
            label: {
              show: true,
              textStyle: {
                color: 'rgb(0, 152, 217)',
                fontSize: 12
              }
            }
          },
          emphasis: {
            areaColor: '#0f6471',
            label: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 15
              }
            }
          }
        },
        //加载值
        data: cityNameList,
      }];
      this.cityMap.setOption(option)
    },

    setHashMap(zoom,name,value){},
    clearHashMap(){}

  }


}
</script>

<style scoped>

</style>
